<script setup>
import { ref } from "vue";
import { avatarUploadAPI } from "@/api/fileUpload";
import { useUser } from "@/store/useUser";
import { putProfile } from "@/api/user";
import { ElMessage } from "element-plus";

const userStore = useUser();

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const fileInput = async (e) => {
  const file = e.target.files[0];
  if (file) {
    try {
      const formData = new FormData();
      formData.append("avatarfile", file);
      await avatarUploadAPI(formData);
      setTimeout(async () => {
        await userStore.userInfoAction();
      }, 1000);
    } catch (e) {
      console.log(e);
    }
  }
};
// 修改昵称
const nickName = ref("");
const save = async () => {
  try {
    await putProfile({
      nickName: nickName.value,
    });
    ElMessage.success("修改成功");
    setTimeout(async () => {
      await userStore.userInfoAction();
    }, 1000);
  } catch (e) {
    console.log(e);
  }
};
</script>

<template>
  <div class="acc-info">
    <p class="title">个人头像</p>
    <p class="tips">真实头像有益于他人识别你，请勿使用他人头像</p>
    <div class="head">
      <img v-if="props.userInfo.avatar" :src="props.userInfo.avatar" alt="" />
      <img v-else src="@/assets/app-mj-1.png" alt="" />
      <button>
        上传头像
        <input type="file" accept=" image/png,image/jpeg" @input="fileInput" />
      </button>
    </div>
    <div class="nickname">
      <span class="label"><span>*</span> 昵称</span>
      <input
        type="text"
        v-model="nickName"
        :placeholder="userInfo.nickName || '请输入昵称'"
      />
    </div>
    <span class="save" @click="save">保存</span>
  </div>
</template>

<style scoped lang="scss">
.acc-info {
  padding: 24px 24px 150px;
}
.title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 4px;
}
.tips {
  font-size: 12px;
  color: rgba(25, 30, 40, 0.36);
  margin-bottom: 20px;
}
.head {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
    border-radius: 50%;
  }
  button {
    width: 92px;
    height: 42px;
    background: #f9fafb;
    border-radius: 6px 6px 6px 6px;
    position: relative;
    border: none;
    color: #191e28;
    cursor: pointer;
    &:hover {
      background: #eeeeef;
    }
    input {
      position: absolute;
      opacity: 0;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}
.nickname {
  display: flex;
  flex-direction: column;
  margin-bottom: 36px;
  .label {
    color: rgba(25, 30, 40, 1);
    font-size: 16px;
    margin-bottom: 12px;
    span {
      color: #ff4f4f;
    }
  }
  input {
    width: 324px;
    height: 48px;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid rgba(25, 30, 40, 0.08);
    padding: 0 12px;
    outline: none;
  }
}
.save {
  display: block;
  width: 160px;
  height: 48px;
  background: #1dbf73;
  border-radius: 8px 8px 8px 8px;
  color: #fff;
  cursor: pointer;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
</style>